import React, { useState, useEffect } from 'react'
import { Table, Form, Space, Button, Select, Drawer, Col, Row, Input, DatePicker } from 'antd'
import { PlusOutlined } from '@ant-design/icons';
import { connect, Dispatch } from 'umi'


import { StateType } from './model'
import { StateType as QuestionStateType } from '../model'
import { QuestionListParams } from './data.d'


interface propsType extends StateType, QuestionStateType {
    dispatch: Dispatch
}
const QueationList: React.FC<propsType> = ({
    list,
    questionsType,
    subject,
    examType,
    dispatch,
}) => {
    const [form] = Form.useForm();
    const [questionParams, setQuestionParams] = useState<QuestionListParams>({
        questions_type_id: '',
        subject_id: '',
        exam_id: '',
    })
    useEffect(() => {
        dispatch({
            type: 'questionList/fetchQuestionList',
            payload: questionParams
        })
    }, [questionParams])

    const onSubmit = (values: QuestionListParams) => {
        console.log(values)
        setQuestionParams(values)
    }
  
    let [visible,setVisible ] = useState(false)


    const ontan = (value:any) => {
        console.log(value)
        dispatch({
            type: 'questionList/fetchQuestionAdd',
            payload: value
        })
    }
    // const showDrawer = () => {
    //     visible = true
    // };
   
    // const onClose = () => {
    //       visible = false
    //   };

    const columns = [
        {
            title: '试题名称',
            dataIndex: 'title',
            key: 'title'
        },
        {
            title: '试题类型',
            dataIndex: 'questions_type_text',
            key: 'questions_type_text',
        },
        {
            title: '考试类型',
            dataIndex: 'exam_name',
            key: 'exam_name',
        },
        {
            title: '课程',
            dataIndex: 'subject_text',
            key: 'subject_text',
        },
        {
            title: '操作',
            dataIndex: 'address',
            key: 'address',
            render: (text: String, record: any) => (
                <Space size="middle">
                    <a>编辑</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ];

    return (
        <div>
            <div className="filter-bar">
                <Form
                    layout='inline'
                    form={form}
                    onFinish={onSubmit}
                >
                    <Form.Item label="试题类型" name="questions_type_id">
                        <Select style={{ width: 200 }}>
                            <Select.Option value='' key='all'>全部</Select.Option>
                            {
                                questionsType.map(item => <Select.Option value={item.questions_type_id} key={item.questions_type_id}>{item.questions_type_text}</Select.Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="考试类型" name="exam_id">
                        <Select style={{ width: 200 }}>
                            <Select.Option value='' key='all'>全部</Select.Option>
                            {
                                examType.map(item => <Select.Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Select.Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="课程类型" name="subject_id">
                        <Select style={{ width: 200 }}>
                            <Select.Option value='' key='all'>全部</Select.Option>
                            {
                                subject.map(item => <Select.Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Select.Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit" type="primary" >搜索</Button>
                    </Form.Item>
                    <Button type="primary" onClick={()=>setVisible(visible=true)} >添加</Button>
                </Form>
            </div>
            <Table dataSource={list} columns={columns} rowKey='questions_id' />;
            <>
                <Button type="primary" onClick={()=>setVisible(visible=true)}>
                    <PlusOutlined /> New account
                </Button>
                <Drawer
                    title="Create a new account"
                    width={720}
                    onClose={()=>setVisible(visible=false)}
                    visible={visible}
                    bodyStyle={{ paddingBottom: 80 }}
                >
                    <Form layout="vertical" onFinish={ontan} hideRequiredMark>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="text"
                                    label="text"
                                    rules={[{ required: true, message: 'Please enter user text' }]}
                                >
                                    <Input placeholder="Please enter user text" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="sort"
                                    label="sort"
                                    rules={[{ required: true, message: 'Please enter user sort' }]}
                                >
                                    <Input placeholder="Please enter user sort" />
                                </Form.Item>
                            </Col>
                        </Row>
                        {/* <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="subject_text"
                                    label="subject_text"
                                    rules={[{ required: true, message: 'Please enter user subject_text' }]}
                                >
                                    <Input placeholder="Please enter user subject_text" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="exam_name"
                                    label="exam_name"
                                    rules={[{ required: true, message: 'Please enter user exam_name' }]}
                                >
                                    <Input placeholder="Please enter user exam_name" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="user_name"
                                    label="user_name"
                                    rules={[{ required: true, message: 'Please enter user user_name' }]}
                                >
                                    <Input placeholder="Please enter user user_name" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="uestions_type_text"
                                    label="uestions_type_text"
                                    rules={[{ required: true, message: 'Please enter user uestions_type_text' }]}
                                >
                                    <Input placeholder="Please enter user uestions_type_text" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="questions_stem"
                                    label="questions_stem"
                                    rules={[{ required: true, message: 'Please enter user questions_stem' }]}
                                >
                                    <Input placeholder="Please enter user questions_stem" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="questions_answer"
                                    label="questions_answer"
                                    rules={[{ required: true, message: 'Please enter user quesquestions_answertions_stem' }]}
                                >
                                    <Input placeholder="Please enter user questions_answer" />
                                </Form.Item>
                            </Col>
                        </Row> */}
                        <Row gutter={16}>
                            <Col span={16}>
                                
                            </Col>
                            <Col span={4}>
                                <Button type="primary" onClick={()=>setVisible(visible=false)} >取消</Button>
                            </Col>
                            <Col span={4}>
                                <Form.Item>
                                    <Button htmlType="submit" type="primary" >确定添加</Button>
                                </Form.Item>
                            </Col>
                        </Row>  
                    </Form>
                </Drawer>
            </>
        </div>
    )
}

type storePropsType = {
    questionList: StateType;
    question: QuestionStateType;
}

const mapStateToProps = ({ questionList, question }: storePropsType) => {
    return {
        ...questionList,
        ...question
    }
}

export default connect(mapStateToProps)(QueationList)
